<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 322px;
            position: fixed;
            bottom:0;
            right:0;
        }
        span{
            position: absolute;
            top:0;
            right:0;
            width:30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
    <script src="../jquery1.0.0.1.js"></script>
    <script>
//         window.onload = function () {
//             //需求：下面的盒子高度变为0，然后大盒子的宽在变为0.
//             var guanbi = document.getElementById("guanbi");
//             var box = guanbi.parentNode;
//             var b = document.getElementById("b");
// 
//             guanbi.onclick = function () {
//                 //下面的盒子高度变为0，然后大盒子的宽在变为0.
//                 animate(b,{"height":0}, function () {
//                     animate(box,{"width":0});
//                 });
//             }
//         }
		window.onload = function(){
			var guanbi = document.getElementById("guanbi");
			var box = guanbi.parentNode;
			var b = document.getElementById("b");
			
			guanbi.onclick = function (){
				animate(b,{"height":0},function(){
					animate(box,{"width":0});
				});
			}
			
			
		}
		
    </script>
</head>
<body>
    <div class="box">
        <span id="guanbi"></span>
        <div class="hd" id="t">
            <img src="images/t.jpg" alt=""/>
        </div>
        <div class="bd" id="b">
            <img src="images/b.jpg" alt=""/>
        </div>
    </div>
</body>
</html>